<template>
  <div class="header">
    <h1>
      <img src="../../../static/images/logo_top.png" alt="LOGO">
      人事管理系统
    </h1>
    <div class="user">
      <img :src="usericon" alt="头像" v-show="username">
      <h2>用户名：{{username}}</h2>
      <button @click="logout" class="close">
        退出
        <span class="fa fa-minus-circle"></span>
      </button>
    </div>
  </div>
</template>

<script>
import cookie from "js-cookie";
export default {
  mounted () {
    // 获取cookie
    cookie.get("username");
    this.username = cookie.get("username");
    this.usericon = cookie.get("usericon");
  },
  data () {
    return {
      activeIndex: "1",
      activeIndex2: "1",
      online: "",
      usericon: "",
      username: ""
    };
  },
  methods: {
    handleSelect (key, keyPath) {
      // console.log(key, keyPath);
    },
    //清除cookie
    logout () {
      cookie.remove("username");
      cookie.remove("password");
      cookie.remove("token");
      cookie.remove("usericon");
      // 关闭聊天
      this.$socket.close();
      // 离线
      this.online = false;
      // 设置为默认头像
      this.usericon = "../../static/images/portraiticon/0.jpg";
      //跳转登陆页面
      this.$router.push("/login");
    }
  }
};
</script>
<style lang="stylus" scoped>
.header {
  display: flex;
  font-size: 16px;
  background: #545c64;
  overflow: hidden;
  height: 60px;
  justify-content: space-between;

  .user {
    color: #fff;
    margin-right: 20px;
    display: flex;
    justify-content: space-around;
    margin: 15px;

    h2 {
      line-height: 30px;
      height: 30px;
      margin: 0 10px;
    }

    img {
      border-radius: 50%;
      width: 30px;
      height: 30px;
    }

    .close {
      font-size: 16px;
      height: 30px;
      line-height: 30px;
      border-radius: 5px;
      text-align: center;
      color: #fff;
      border: 1px solid rgb(255, 208, 75);
      background: rgb(84, 92, 100);
      padding: 0 5px;
    }
  }

  h1 {
    text-align: center;
    line-height: 60px;
    height: 60px;
    color: #fff;
    font-size: 18px;
    padding-left: 20px;

    img {
      width: 40px;
      height: 40px;
    }
  }
}

.el-menu {
  flex: 1;
  overflow: auto;

  li {
    height: 60px;
    padding: 0;

    a {
      font-size: 16px;
      display: block;
      height: 60px;
      text-align: center;
      padding: 0 15px;
      width: 100%;

      span {
        margin: 0 5px;
        font-size: 18px;
      }
    }
  }

  li:hover {
    background: #000;
  }
}

.el-menu-item {
  font-size: 15px;
  padding: 0 20px !important;

  span {
    margin-right: 4px;
  }
}
</style>
